<div class="hidden" id="adventures_table" data-cy="adventures_table" _="on load hedyApp.getForTeacherTable('adventures_table')">
  <div class="overflow-x-auto rounded-lg shadow-lg">
    <table class="w-full border border-gray-400">
      <thead>
        <tr class="bg-blue-300 text-blue-900">
          <th class="py-2 text-center">{{_('name')}}</th>
          <th class="py-2 text-center">{{_('creator')}}</th>
          <th class="py-2 text-center">{{_('owner')}}</th>
          <th class="py-2">{{_('level')}}</th>
          <th class="text-center py-2 hidden sm:table-cell">{{_('last_update')}}</th>
          <th class="py-2 bg-blue-900 text-white">{{_('actions')}}</th>
        </tr>
      </thead>
      <tbody>
        {% for adventure in teacher_adventures %}
          <tr class="{% if loop.index is divisibleby 2 %}bg-gray-200{% else %}bg-white{% endif %}">
            <td class="text-center py-2"><a href="for-teachers/customize-adventure/{{adventure.id}}" class="no-underline" data-cy="edit_link_{{adventure.name|e}}">{{adventure.name|e}}</a></td>
            <td class="text-center py-2 owner_username_cell">{{adventure.author or adventure.creator}}</td>
            <td class="text-center py-2 username_cell">{{adventure.creator}} {% if adventure.why == 'shared_class' %}<i class="fa-solid fa-user-group text-gray-500 text-sm ml-4" title="{{ adventure.why_class }}"></i>{% endif %}</td>
            <td class="text-center py-2">
              {% if adventure.levels %}
                  {% for level in adventure.levels %}
                      {{level}}{% if loop.index != adventure.levels|length %}, {% endif %}
                  {% endfor %}
                {% elif adventure.level %}
                  {{adventure.level}}
                {% else %}
                    -
                {% endif %}
            </td>
            <td class="text-center py-2 hidden sm:table-cell">{{adventure.date}}</td>
            <td class="text-center py-2">
              <div class="flex justify-center text-blue-900">
                <button class="flex flex-col items-center w-1/2" data-cy="preview_{{adventure.name}}"
                _="on click window.open('/adventure/{{ adventure.name }}/{{ adventure.level }}?creator={{ adventure.creator }}', '_self')">
                  <span class="fas fa-eye block my-auto lg:my-0"></span>
                  <span  class="hidden lg:block mt-1">{{_('preview')}}</span>
                </button>
                <button id="delete_adventure" class="flex flex-col items-center w-1/2"
                        data-cy="delete_adventure_{{ adventure.name }}"
                  hx-confirm="{{_('delete_adventure_prompt')}}"
                  hx-trigger="click"
                  hx-delete="/for-teachers/customize-adventure/{{adventure.id}}"
                  hx-target="#adventures_table"
                  hx-swap="outerHTML">
                  <span class="fas fa-trash block text-red-700 my-auto lg:my-0"></span>
                  <span  class="text-red-700 hidden lg:block mt-1">{{_('remove')}}</span>
                </button>
              </div>
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
